<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script>
function VNode(tag, data, children, text) {
	return {
		tag: tag,
		data: data,
		children: children,
		text: text
	}
}
 
class Vue {
	constructor(options={}) {
		this.$options = options
		const vdom = this._update()
		console.log(vdom)
	}
	_update() {
		return this._render.call(this)
	}
	_render() {
		const vnode = this.$options.render.call(this)
		return vnode
	}
	__h__(tag, attr, children) {
		return VNode(tag, attr, children.map((child)=>{
			if(typeof child === 'string'){
				return VNode(undefined, undefined, undefined, child)
			}else{
				return child
			}
		}))
	}
	__toString__(val) {
		return val == null ? '' : typeof val === 'object' ? JSON.stringify(val, null, 2) : String(val);
	}
}
 
 
var demo = new Vue({
	el: '#demo',
	data: { 
	text: "before",
	},
	render(){
		return this.__h__('div', {}, [
			this.__h__('span', {}, [this.__toString__(this.text)])
		])
	}
})
/**
 * 就像这段代码，render 
 * 函数里其实只依赖text，
 * 并没有依赖name和age，
 * 所以，我们只要text改变的时候，
 * 我们自动触发render 函数 让它生成一个虚拟DOM就ok了（
 * 剩下的就是这个虚拟DOM和上个虚拟DOM做比对，
 * 然后操作真实DOM，只能以后再说了），
 * 那么我们正式考虑一下怎么做
 */
</script>	
</body>
</html>